Introduction:
Forever love is the elegant wedding & agency HTML Template. Forever love is the best suited for Wedding agency business n personal wedding. This is a business template that is help full for Wedding...
Prominent Features:
- Light, 100% responsive and fully flexible premium HTML template
- Neat, clean and simple design
- Cross browser compatible
- Fully featured HTML homepage
- Advanced version of Revolution Slider (Save $15)
- Unique and Creative Header Style
- Awesome Footer Styles
- Built-in latest SEO features
- Owl Carousel2 included
- High Resolution picture graphics
- Unlimited color schemes
- Super Responsive
- Built in slides for Revolution Slider
- Well managed CSS file with proper table of content
- Properly Commented and indented HTML files.
- Boxed and Wide Layout
- Optimized
- Built with bootstrap 3.3.6
- Google Fonts & Font Awesome
- 1370 pixel width
- HTML5 Validated
- Developed with jQuery Code
- Detailed and complete documentation
Javasripts:
bootstrap.min:As the name suggests, This is the Bootstrap file which enables the JQuery functionalities provided by Bootstrap.
perfect-scrollbar.jquery.min & perfect-scrollbar:The customized scroll bar in different section has been designed with the help of this particular plugin.
jquery.min:This particular jQuery file renders functionality to all the other jQuery files featured in the Lord HTML template.
owl.carousel.min:The working of all the carousels is based on this file. Owl Carousel is one of the best responsive carousels that works with the touch swipe on the small devices like ipad, mobiles etc.
jquery.poptrox.min:The functionality of the lightbox has been put using this jquery plugin Poptrox.It supports all the lightbox for images videos like vimeo, youtube, iframes, soundcloud etc.
jquery.downCountThe downcount is used for the timer in a template.
onscreenOnscreen is used to give animations to the visible elements.
styleswitcherThis file is used for style switching in the template.
scrollr.minThis file is used to give scrollr effect to the elements in the template.
script.js:It contains all the jQuery functions that have been incorporated in the template.
Css Files:
style.cssThis is the main style file on which the overall styling of the template is based.
responsive.cssThis CSS file gets automatically activated when you are using the template on smaller screen sizes.
bootstrap.min.cssAs the theme has been developed on ‘bootstrap’, all the styles of this framework are based on this CSS file.
font-awesome.min.cssIt is actually fontawesome file which is named as 'icon.css'. The icons used in tempaltes are used by adding the fontawesome in the tamplete.
perfet-scrollbar.cssThis file is used for the styling of the scrollbar in the template.
color.cssAs the name suggests this file belongs to the color scheme of the template.
CODE STRUCTURE:
How to
How to make a header sticky?
You can make any header sticky simply by using a class i.e"stick"For example, if you want to make the header sticky, just add the class "stick" in this way:
<div class="creative-header stick">
How to manage gaps between the sections?
For the top and bottom spacing for each section, the class "block"has been used, which applies 90 pixels spacing to the section from the top and bottom.
You can manage the inter-section spacing easily according to your page flow.When you use sections one after another then the spacing between the two sections becomes 180 pixels as the bottom space of the top section and the top space of the bottom section will join, and it will become awkward spacing.To manage this spacing between the consecutive sections use class "remove-gap" with the "block" class in the section from which you want to avoid top space.
<div class="block remove-gap">
How to make your own color scheme?
If you want to use your own color scheme in the template, it is very easy to define and apply it. Go to the "css" folder. You will find "colors" folder inside it. In this folder, you can locate "color.css" file. Open any it in the editor, you will see a long list of classes separated with commas (,). Here you need to change the css properties for the background, color and border. For this purpose, just change the color code in that file and thats all.
How to switch between white and pattern background?
There is a class, name "pattern" in the coding. If you want a pattern background, just apply the “pattern” class. For a white background, you just need to remove the class “pattern” from the code and the background will be automatically white.
For Pattern Background:
<div class="block pattern">
How to customize Owl Carousel for animations, slide switching, slideshow auto play, etc.?
Auto Play Slideshow: If you want an auto play slideshow, go to Owl Carousel initialization and add the code “autoplay:true” there as illustrated below:
$('.services-carousel').owlCarousel({
autoplay:true,
autoplayTimeout:30000,
smartSpeed:2000,
loop:true,
dots:false,
nav:true,
margin:10,
singleItem:true,
items:1,
animateIn:"fadeIn",
animateOut:"fadeOut"
});
If you want to deactivate the feature of auto play, just remove the code “autoplay:true” from the Owl Carousel initialization. In this case, the slides can be switched with the help of navigation buttons provided to the sides.
Set Slide Switching through Fade In/Fade Out Animations: If you want the next slide switching through fading, use the code “animateIn:"fadeIn", animateOut:"fadeOut" in the Owl Carousel initialization as illustrated below:
animateIn:"fadeIn",
animateOut:"fadeOut"
Set Speed for Carousel Slides: You can set the sliding speed as per your taste. For this, enter the code “autoplayTimeout:30000, smartSpeed:2000” in the Owl Carousel initialization and change its value as you want. It is illustrated below:
autoplayTimeout:30000,
smartSpeed:2000
For further guidance, go to the live documentation of Owl Carousel by following this link:http://www.owlcarousel.owlgraphic.com/
How to switch between boxed and wide layout?
The Template supports both boxed and wide layouts. By default the template is full width. You can convert any page to boxed layout just by adding a class boxed to a div having class "theme-layout" in this way:
<div class = "theme-layout boxed">
When you make your page boxed now you also need a background image to make it look beautilfull. In order to add a backgroud to the page, change your <body> to this <body style="background-image: url(images/parallax3.jpg);">. Put the path of your image in the URL brackets. Now Your webpage is converted into boxed layout.
An example page is also given in the package to make it more easier for you named index-boxed.html
Credits
The credit for the development of this marvelous template goes to:
- Google Fonts
- Bootstrap
- Flat Icons
- Owl Carousel
- Developers of Javascript files which have been utilized herein.
- Team of Stillidea